<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="400" height="320"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.font = 'bold 20px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Function to draw a light bulb
    function drawBulb(x, y, radius) {
        // Clear area behind the bulb to prevent wires from showing through
        ctx.fillStyle = 'white';
        ctx.beginPath();
        ctx.arc(x, y, radius + ctx.lineWidth / 2, 0, 2 * Math.PI);
        ctx.fill();
        
        // Draw the bulb's circle
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw the cross inside the bulb
        ctx.beginPath();
        const d = radius * 0.707; // sin(45) * r
        ctx.moveTo(x - d, y - d);
        ctx.lineTo(x + d, y + d);
        ctx.moveTo(x - d, y + d);
        ctx.lineTo(x + d, y - d);
        ctx.stroke();
    }

    // Define coordinates for the layout
    const x_left = 50;
    const x_mid = 200;
    const x_right = 350;
    const y_top = 40;
    const y_mid = 150;
    const y_bot = 260;
    const bulbRadius = 18;

    // Draw main circuit frame (the outer box)
    ctx.beginPath();
    ctx.moveTo(x_left, y_top);
    ctx.lineTo(x_right, y_top);
    ctx.lineTo(x_right, y_bot);
    ctx.lineTo(x_left, y_bot);
    ctx.closePath();
    ctx.stroke();
    
    // Draw internal wires
    ctx.beginPath();
    ctx.moveTo(x_mid, y_top);
    ctx.lineTo(x_mid, y_bot);
    ctx.moveTo(x_mid, y_mid);
    ctx.lineTo(x_right, y_mid);
    ctx.stroke();

    // Draw Battery on the left wire
    const batt_y_center = (y_top + y_bot) / 2;
    const plate_sep = 20;
    const long_plate_w = 30;
    const short_plate_w = 15;
    // Erase part of the left wire to insert the battery symbol
    ctx.clearRect(x_left - ctx.lineWidth, batt_y_center - plate_sep - 5, ctx.lineWidth * 2, plate_sep * 2 + 10);
    
    // Draw battery plates
    ctx.beginPath();
    ctx.moveTo(x_left, batt_y_center - plate_sep / 2);
    ctx.lineTo(x_left, y_top);
    ctx.moveTo(x_left, batt_y_center + plate_sep / 2);
    ctx.lineTo(x_left, y_bot);
    ctx.stroke();
    
    ctx.lineWidth = 3; // Make plates slightly thicker
    ctx.beginPath();
    ctx.moveTo(x_left - long_plate_w / 2, batt_y_center - plate_sep / 2);
    ctx.lineTo(x_left + long_plate_w / 2, batt_y_center - plate_sep / 2);
    ctx.moveTo(x_left - short_plate_w / 2, batt_y_center + plate_sep / 2);
    ctx.lineTo(x_left + short_plate_w / 2, batt_y_center + plate_sep / 2);
    ctx.stroke();
    ctx.lineWidth = 2; // Reset line width
    
    // Label for battery
    ctx.fillText('ξ', x_left + 25, batt_y_center + 40);

    // Draw light bulbs
    drawBulb(x_mid, (y_top + y_mid) / 2, bulbRadius);
    drawBulb(x_mid, (y_mid + y_bot) / 2, bulbRadius);
    drawBulb(x_right, (y_top + y_mid) / 2, bulbRadius);
    drawBulb((x_mid + x_right) / 2, y_mid, bulbRadius);
    
    // Draw Switch on the bottom-right wire
    // Erase part of the wire for the switch
    const switch_x1 = x_mid + 90;
    const switch_x2 = switch_x1 + 40;
    ctx.clearRect(switch_x1 - 5, y_bot - 10, (switch_x2 - switch_x1) + 10, 20);
    // Redraw wire segments around the switch
    ctx.beginPath();
    ctx.moveTo(x_mid, y_bot);
    ctx.lineTo(switch_x1, y_bot); 
    ctx.moveTo(switch_x2, y_bot); 
    ctx.lineTo(x_right, y_bot);
    ctx.stroke();
    // Switch arm
    ctx.beginPath();
    ctx.moveTo(switch_x1, y_bot);
    ctx.lineTo(switch_x1 + 20, y_bot - 20);
    ctx.stroke();
    
    // Labels for components
    ctx.fillText('#1', x_mid - 40, (y_top + y_mid) / 2);
    ctx.fillText('#2', x_mid - 40, (y_mid + y_bot) / 2);
    ctx.fillText('#3', x_right + 30, (y_top + y_mid) / 2 - 10);
    ctx.fillText('#4', (x_mid + x_right) / 2, y_mid - 30);
    ctx.fillText('S', (switch_x1 + switch_x2) / 2, y_bot + 20);
</script>
</body>
</html>